<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>物流详情</title>
	<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/app.css" />
	<style type="text/css">
		.logistics-state {
			height: 5rem;
			background-color: #fff;
			padding: .75rem;
			display: flex;
			margin-bottom: .5rem;
		}

		.timeline {
			background-color: #FFFFFF;
		}

		.timeline-item {
			position: relative;
			padding-left: 2.4rem;
			padding-right: 0.75rem;
			/*margin-left: 0.85rem;*/
		}

		.timeline-item:before {
			content: '';
			position: absolute;
			top: 0;
			left: 1.175rem;
			width: 1px;
			height: 100%;
			background-color: #D5F3FB;
			/**/
		}

		.timeline-item:first-child:before {
			top: 1.15rem;
			height: 100%;
		}

		.timeline-item:last-child:before {
			bottom: 50%;
			height: calc(50% - 0.85rem);
		}

		.timeline-item.oneitem:before {
			top: 50%;
			height: 0%;
		}

		.timeline-item:after {
			content: '';
			position: absolute;
			top: 1rem;
			width: 0.3rem;
			height: 0.3rem;
			background: rgba(213, 243, 251, 1);
			left: 1.2rem;
			margin-left: -0.15rem;
			border-radius: 50%;
		}

		.timeline-item.highlight:after {
			width: 0.8rem;
			height: 0.8rem;
			border: 0.25rem solid rgba(114, 213, 239, 1);
			margin-top: -0.075rem;
			margin-left: -0.4rem;
			background: #ffffff;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			z-index: 2;
		}

		.timeline-item-content {
			padding: 0.8rem 0;
			font-size: .6rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}

		.timeline-item-content .context {
			font-size: 0.6rem;
			font-family: PingFangSC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 0.85rem;
		}

		.timeline-item-content .time_end {
			font-size: 0.5rem;
			font-family: PingFangSC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 0.7rem;
		}

		.ming-text-app-dark {
			font-size: 0.7rem!important;
			font-family: PingFangSC-Regular!important;
			font-weight: 400!important;
			color: #333333!important;
			line-height: 1rem!important;
			margin-bottom: 0.3rem;
		}

		.ming-time-app-dark {
			font-size: 0.6rem!important;
			font-family: PingFangSC-Regular!important;
			font-weight: 400!important;
			color: rgba(153, 153, 153, 1)!important;
			line-height: 0.85rem!important;
		}

		.ming-text-app-dark .end_time {
			font-size: 0.6rem;
			font-family: PingFangSC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 0.85rem;
		}
		/*物流详情样式改写*/

		.logistics_wraper {
			padding: 0.75rem;
			display: flex;
		}

		.logistics_img {
			width: 3.5rem;
			height: 3.5rem;
			margin-right: 0.75rem;
			border-radius: 0.2rem;
		}

		.logistics_img img {
			width: 3.5rem;
			height: 3.5rem;
			border-radius: 0.2rem;
		}

		.logistics_status {
			font-size: 0.7rem;
			font-family: PingFangSC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			margin-bottom: 0.5rem;
		}

		.logistics_company {
			font-size: 0.6rem;
			font-family: PingFangSC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			margin-bottom: 0.15rem;
		}

		.logistics_number {
			font-size: 0.6rem;
			font-family: PingFangSC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}
	</style>
</head>

<body>
	<div id="app" v-cloak="">
		<div class="logistics_wraper" style="background:rgba(255,255,255,1);border-bottom:0.5rem solid rgba(246,246,246,1);">
			<div class="logistics_img" style="">
				<img :src="info.good_cover" style="">
				<!-- <div class="number aui-text-center aui-font-size-12 ming-text-white">
								{{info.good_num}}件商品
							</div> -->
			</div>
			<div class="logistics_cont" style=""  v-show="info.ship_num">
				<div class="logistics_status" style="">
					物流状态:<span>{{status_txt}}</span>
				</div>
				<div class="logistics_company" style="">
					承运公司：{{info.ship_company}}
				</div>
				<div class="logistics_number" style="font-size:0.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(153,153,153,1);line-height:0.85rem;">
					运单编号：{{info.ship_num}}
				</div>
			</div>
		</div>

		<div class="timeline" style="">
			<div v-for="(vo,index) in kuaidi_info" class="timeline-item" :class="{'highlight':index==0}">
				<div class="timeline-item-content">
					<div class="" :class="{'ming-text-app-dark':index==0}" style="font-size:0.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(153,153,153,1);line-height:0.85rem;margin-bottom:2px;">
						{{vo.context}}
					</div>
					<div class="" :class="{'ming-time-app-dark':index==0}" style="font-size:0.5rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(153,153,153,1);line-height:0.7rem;">
						{{vo.time}}
					</div>
				</div>
			</div>
		</div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/vue.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			id: 0,
			info: {},
			kuaidi_info: []
		},
		methods: {
			get_list: function() {
				get_data('api/order/logistics', {
					token: $api.getStorage('token'),
					order_id: vm.id
				}, function(ret) {
					if (ret.status) {
						vm.info = ret.data
						vm.kuaidi_info = ret.data.kuaidi_info.data
					}
				})
			}
		},
		computed: {
			status_txt: function() {
				if (this.kuaidi_info.length == 0) {
					return '暂无信息';
				} else {
					if (this.kuaidi_info[0].context.indexOf('签收') != -1) {
						return '已签收';
					}
					if (this.kuaidi_info[0].context.indexOf('派送') != -1) {
						return '派送中';
					}
					return '运输中';
				}
			}
		}
	})
	apiready = function() {
		vm.id = $api.getStorage('id')
		vm.get_list()
	}
</script>

</html>
